<template>
  <div class="flex-row">
    <span>输入一个值:</span>
    <input v-model="inputVal" @change="changeInput" :maxlength="1" />
    <div>输入值是否是数字或字母：{{ showResult }}</div>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      inputVal: "",
      showResult: "",
    };
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
  computed: {},
  watch: {},
  methods: {
    changeInput() {
      if (!this.inputVal.length) {
        this.showResult = "";
        return;
      }
      if (
        (this.inputVal >= "a" && this.inputVal <= "z") ||
        (this.inputVal >= "A" && this.inputVal <= "Z") ||
        !isNaN(this.inputVal)
      ) {
        this.showResult = true;
        return;
      }
      this.showResult = false;
    },
  },
};
</script>

<style lang="less"></style>

<style lang="less" scoped>
.flex-row {
  display: flex;
  align-items: center;
}
input {
  width: 140px;
  height: 32px;
  line-height: 32px;
  border-radius: 4px;
  padding: 0 5px;
  -webkit-appearance: none;
  background-image: none;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  outline: none;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  overflow: visible;
}
</style>
